import React from 'react'
import {useSelector,useDispatch} from "react-redux"
import * as action from "../../action"
import { Cell,Image, SwipeCell,Typography ,Button } from 'react-vant'
import {useNavigate} from "react-router-dom"
import {useEffect} from "react"
function Address() {
  let dispatch = useDispatch()
  let navigate = useNavigate()
  let store = useSelector((state)=>{
      return {
          ...state.shopcarreducer
      }
  })
  console.log(store,"store");
  let goAddress = ()=>{
        navigate("/addaddress")
  }
  let delfn = (index)=> {
     dispatch(action.deladdress(index))
  }
  return (
    <div>
        {
            store.addressarr && store.addressarr.length ?  store.addressarr.map((item,index)=>{

                return <SwipeCell
                key={index}
                rightAction={
                 <>
                     <Button style={{ height: '100%' }} square type="warning">
                    编辑
                  </Button>
                  <Button style={{ height: '100%' }} square type="danger" onClick={()=>delfn(index)}>
                    删除
                  </Button>

                 </>
                 
                  
                }
              >
                 <Cell
                center
               
                title={item.name}
                label={<div><p>住址:{item.address}</p><p>{item.tel}</p></div>}
                icon={<Image width={44} height={44} src='https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202107%2F09%2F20210709142454_dc8dc.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1669865419&t=4f70e6a39418049d220fdab921d85c1c' round />}
                isLink
              />
              </SwipeCell>
            }):""
        }
        {/* vw是视口的宽， vh是视口的高 */}
        <Button
            block
            round
            type="primary"
            color="linear-gradient( 135deg, #3f45ff 10%, #7367F0 100%)"
            style={{ margin: "30px auto", width:"90vw" }}
            onClick={goAddress}
            
        >
           添加地址
      </Button>
    </div>
  )
}

export default Address